<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLongTitle">索引</h5>
    <div style="float: right">
        <button ng-click="add()" type="button" class="btn btn-primary" data-toggle="modal"
                data-target="#add">
            添加索引
        </button>
    </div>
</div>
<div class="table-responsive">
    <table class="table table-striped ">
        <thead class="w-100">
        <tr class="row mx-0">
            <th class="col-4">id</th>
            <th class="col-4">data_type</th>
            <th class="col-3">data_describe</th>
            <th class="col-1" ></th>
        </tr>
        </thead>
        <tbody class="w-100">
        <tr ng-repeat="data in dataType track by $index" class="row mx-0">
            <td class="col-4"  ng-click="createMapping(data)" style="cursor: pointer;color: cornflowerblue">{{data.id}}</td>
            <td class="col-4">{{data.dataType}}</td>
            <td class="col-3">{{data.dataDescribe}}</td>
            <td class="col-1" >
                <button type="button" data-dismiss="modal" ng-click="delete(data)" class="close"
                        aria-label="Close" data-target="#delete" data-toggle="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="modal" id="add" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">创建索引</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">索引类型描述</span>
                    </div>
                    <input ng-model="dataType.dataDescribe" type="text" class="form-control"
                           aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroup-sizing-default">索引名</span>
                    </div>
                    <input ng-model="dataType.dataType" type="text" class="form-control"
                           aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" >取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="commit(dataType)">
                    保存
                </button>
            </div>
        </div>
    </div>
</div>


<div class="modal" id="delete" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除确认</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5 style="text-align: center;color: red">删除索引后，之前的数据也将被删除，确定删除吗？</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="confirmDelete()">是</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
            </div>
        </div>
    </div>
</div>